import * as React from "react";
import {Button, DatePicker, Form,Spin, Input, Table} from "antd";
import { Select } from 'antd';
import API from "../../api/api";
import IconFont17 from "../../util/autoIcon/correct";
import IconFont16 from "../../util/autoIcon/error";
const { RangePicker } = DatePicker;
const { Option } = Select;

export default class LoginLog extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            current:1,
            count:null,
            data:[],
            spinFlag:false,
            pageSize:10,
        }
        let result = API.getLoginLog();
        this.state.data = result.data;
        this.state.count = result.count;
    }
    // "LOGIN_ID": 25.0,
    // "USER_ID": 61270.0,
    // "TOKEN": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6Ild2aEVGalU1UlVYM2hKeFRDZ2lpdGc9PSIsIlBhc3NXb3JkIjoiYjZtdDZSdHFkR1pLTjIxT09MSXZDQT09IiwiVXNlcklEIjoieVZKYU9memQxdVU9IiwibmJmIjoxNjIyNzg4NzkxLCJleHAiOjE2MzE0Mjg3OTEsImlzcyI6Ind3dy50ZW1wZXIub3JnIiwiYXVkIjoiYWxsIn0.IrpVM-LaUJP21LiHpk6TZ-N8WMMwPRyBIIpb-YQ5IUg",
    // "CREATE_BY": 60063341.0,
    // "UPDATE_BY": 60063341.0,
    // "CREATE_DATE": "2021-06-04T13:28:57",
    // "UPDATE_DATE": "2021-06-04T14:40:30",
    // "USER_IP": "172.18.133.56",
    // "LOGIN_STATUS": "true",
    // "IS_DELETE": "N",
    // "USER_NAME": "宋亞輝(K007-資訊中心)"
    columns = [
        {
            title: '登錄用戶',
            dataIndex: 'DESCRIPTION',
            key: 'USER_NAME',
            ellipsis:true,
            width: 200
        },
        {
            title: '登錄狀態',
            dataIndex: 'LOGIN_STATUS',
            key: 'LOGIN_STATUS',
            width:90,
            render:(text,record)=>{
                if(text=="true"){
                    return <IconFont17 type="icon-icon-test-copy-copy"/>
                }else if(text=="false"){
                    return <IconFont16 type="icon-cuowu"/>
                }
            }
        },
        {
            title: '當前狀態',
            dataIndex: 'NOW_STATUS',
            key: 'NOW_STATUS',
            width:90,
            render:(text,record)=>{
                if(text=="true"){
                    return "已登錄"
                }else if(text=="false"){
                    return "已退出"
                }
            }
        },
        {
            title: 'token',
            dataIndex: 'TOKEN',
            key: 'TOKEN',
            ellipsis:true,
            width:650
        },
        {
            title: '用戶IP',
            dataIndex: 'USER_IP',
            key: 'USER_IP',
            ellipsis:true,
            width:150
        },
        {
            title:'用戶工號',
            dataIndex: 'USER_NAME',
            key:'UPDATE_BY',
            ellipsis:true,
            width:120
        },
        {
            title: "訪問时间",
            dataIndex: 'CREATE_DATE_FORMAT',
            key: 'UPDATE_DATE',
            ellipsis:true,
            width:200
        },

    ]

    loginStatus = "all";
    personNo = "";
    startDate = "";
    endDate = "";
    startDate2 = "";
    endDate2 = "";

    //表单对象
    formRef = React.createRef();

    onReset = () => {
        this.formRef.current.resetFields();
    };

    onFinish = (item) =>{
        if(item.personNum!=undefined){
            this.personNo = item.personNum
        }else {
            this.personNo = ""
        }
        if(item.loginStatus!=undefined){
            if(item.loginStatus.value == "all"){
                this.loginStatus = ""
            }else this.loginStatus = item.loginStatus.value
        }else {
            this.loginStatus = ""
        }
        this.startDate2 = this.startDate
        this.endDate2 = this.endDate

        this.setState({spinFlag:true},()=>{
            setTimeout(()=>{
                let result = API.getLoginLog(this.loginStatus,this.personNo,this.startDate2,this.endDate2,1,this.state.pageSize)
                this.setState({current:1,data:result.data,count:result.count,spinFlag:false})
            },100)
        })
        console.log(item)
    }

    onChange=(moment,string)=>{
        this.startDate=string[0];
        this.endDate=string[1];
        // this.getDataByCondition(this.searchKey,this.startDate,this.endDate);
    }

    onShowSizeChange(current, pageSize) {
        this.changePage(1,pageSize)
        this.setState({pageSize:pageSize})
    }

    changePage(current,pageSize){
        let loginStatus = this.loginStatus;
        let personNum = this.personNo==""?null:this.personNo;
        let startDate = this.startDate2==""?null:this.startDate2;
        let endDate = this.endDate2==""?null:this.endDate2;
        let result = API.getLoginLog(loginStatus,personNum,startDate,endDate,current,pageSize);
        this.setState({data:result.data,count:result.count,current:current});
    }

    paginationProps =_=> {
        const total = this.state.count
        const pageSize = this.state.pageSize
        return {
            current:this.state.current,
            showSizeChanger: true,//设置每页显示数据条数
            showQuickJumper: false,
            // showTotal: () => `共${this.state.count}条`,
            pageSize: pageSize,
            total: total,  //数据的总的条数
            onChange: (current) => this.changePage(current,pageSize), //点击当前页码
            onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
                console.log(pageSize);
                this.onShowSizeChange(current, pageSize)
            }
        }
    }

    render() {
        return (
            <Spin tip="Loading..." spinning={this.state.spinFlag}>
                <div style={{marginBottom:"1rem" }}>
                    <Form
                        ref={this.formRef}
                        onFinish={this.onFinish}
                        onReset={this.onReset}
                        style={{display:"inline"}}
                        layout={"inline"}
                    >
                        <Form.Item
                            name="accessNum"
                            label="登錄記錄"
                            style={{display:"inline"}}
                        >
                            共{this.state.count}筆數據
                        </Form.Item>
                        <Form.Item
                            name="subscribe"
                            label="時間範圍"
                            style={{display:"inline"}}
                        >
                            <RangePicker allowClear showTime style={{ width: 220 }} onChange={this.onChange}/>
                        </Form.Item>
                        <Form.Item
                            name="loginStatus"
                            label="登錄狀態"
                            style={{display:"inline"}}
                        >
                            <Select
                                labelInValue
                                defaultValue={{ value: 'all' }}
                                style={{ width: 120 }}
                            >
                                <Option value="all">所有</Option>
                                <Option value="true">登錄</Option>
                                <Option value="false">退出登錄</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="personNum"
                            label="用戶工號"
                            style={{display:"inline"}}
                            // rules={[
                            //     ({ getFieldValue }) => ({
                            //         validator(_, value) {
                            //             if (!isNaN(value)||value==undefined||value=="") {
                            //                 return Promise.resolve();
                            //             } else{
                            //                 return Promise.reject(new Error('工號格式不符'));
                            //             }
                            //         },
                            //     }),
                            // ]}
                        >
                            <Input allowClear style={{ width: 120 }} />
                        </Form.Item>
                        <Form.Item
                            label="查詢"
                            name="commit"
                            style={{display:"inline"}}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table  columns={this.columns} dataSource={this.state.data} pagination={this.paginationProps()} scroll={{x: '80vw'}} style={{marginRight:"2rem"}} />
            </Spin>
        )
    }
}
